<template>
    <div class="update-item-container">
        <div class="activityUpdate">
            <div class="activityUpdate-meta">
                <div class="activityUpdate-metaLeft">
                    <div class="activityUpdate-metaLeftAvatar">
                        <a>
                            <!--<img src="static/img/thumb66.png">-->
                            <div class="commentAvatar" :style="getProfileImage(updateItem.userId)"></div>
                        </a>
                    </div>
                    <div class="activityUpdate-metaLeftInfo">
                        <span class="activityUpdate-metaLeftName">
                            <!--posted by {{getUserNameById(userId)}}{{userName}}-->
                            <el-tag v-if="userId == ownerId" class="owner-tip">owner</el-tag>
                        </span>
                        <span class="activityUpdate-metaLeftTimestamp">
                           {{updateItem.createTime}}
                        </span>
                    </div>
                </div>
                <div class="activityUpdate-metaRight">
                    <span class="activityUpdate-metaRightDuration">
                        {{updateItem.createTime |dateFormat}}
                    </span>
                </div>
            </div>
            <div class="activityUpdate-title">
                <!--$10k STRETCH GOAL ANNOUNCEMENT!-->
                {{updateItem.title}}
            </div>
            <div class="activityUpdate-content">
                <div class="activityUpdate-ugcContent">
                    <p>
                        {{updateItem.content}}
                    </p>
                    <!--<p>If we reach $10,000 then all backers of $25 and up receive a limited edition trading card! Backers of
                        $20 and under have a SUPER SMALL chance at getting one randomly inserted, but $25 and up will get
                        them for sure.</p>
                    <p>BUT we've added a $15 tier for
                        <strong>ONLY TEN </strong>people to for sure get a copy of the book plus the trading card. You will get the
                        card at this tier even if we don't get $10k.</p>-->
                </div>
                <!--<div class="truncationContent-truncateFade"></div>-->
            </div>
        </div>
        <div class="activityUpdate-divider"></div>
    </div>
</template>

<script>
    import moment from 'moment'
    import Constants from "@/env"
    import {saveReply} from "@/api/comment";
    import {mapState, mapMutations} from 'vuex'
    export default {
        props: {
            updateItem: {},
            ownerId: '',
            campaignId: ''
        },
        filters: {
            dateFormat(time) {
                return moment(time).startOf('mimute').fromNow()
            }
        },
        data() {
            return {
                userName: '',
            }
        },
        methods: {
            getProfileImage(userId) {
                var imagePath = Constants.ICON_HOST + userId

                return `background-image: url('${imagePath}');background-size: 100% 100%;
                background-repeat: no-repeat;`
            },
            getUserNameById(userId) {

                var that = this
                this.$store.dispatch('getUserName', userId).then((res) => {
                    that.userName = res.userName
                }).catch((err) => {
                })

            },
            getReplyNameById(userId) {

                var that = this
                this.$store.dispatch('getUserName', userId).then((res) => {
                    that.replyName = res.userName
                }).catch((err) => {
                })

            }
        },
        computed: {
            /*computeUserName() {
                var that = this
                return function (userId) {
                    return that.getUserNameById(userId)
                }
            }*/

            ...mapState({
                'userId': state => state.user.userId,
            }),
        }
    };
</script>

<style scoped lang="scss">
    .update-item-container {
        margin: 6px;
        .activityUpdate {
            border: 1px solid #dddddd;
            padding: 20px;
            background-color: white;
            .activityUpdate-meta {
                font-family: "Benton Sans", "Helvetica", "sans-serif";
                font-size: 14px;
                font-weight: normal;
                line-height: 20px;
                padding-bottom: 20px;
                border-bottom: 1px solid #dddddd;
                width: 100%;
                display: flex;
                justify-content: space-between;
                .activityUpdate-metaLeft {
                    display: flex;
                    align-self: center;
                    .activityUpdate-metaLeftAvatar {
                        align-self: center;
                        margin-right: 10px;
                       /* img {
                            width: 40px;
                            height: 40px;
                            border-radius: 20px;
                        }*/
                        .commentAvatar {
                            width: 50px;
                            height: 50px;
                            border-radius: 25px;
                            -moz-border-radius: 25px;
                            vertical-align: middle;
                        }
                    }
                    .activityUpdate-metaLeftInfo {
                        align-self: center;
                        .activityUpdate-metaLeftName {
                            color: #2a2a2a;
                            .owner-tip {
                                display: inline;
                            }
                        }
                        span {
                            display: block;
                        }
                    }
                    .activityUpdate-metaLeftTimestamp {
                        color: #a8a8a8;
                    }
                }
                .activityUpdate-metaRight {
                    -ms-flex-item-align: start;
                    -webkit-align-self: flex-start;
                    -moz-align-self: flex-start;
                    -ms-align-self: flex-start;
                    align-self: flex-start;
                    text-align: right;
                    .activityUpdate-metaRightDuration {
                        color: #a8a8a8;
                    }
                    span a {
                        display: block;
                    }
                }
            }
            .activityUpdate-title {
                font-family: "Benton Sans Medium";
                font-size: 18px;
                font-weight: normal;
                line-height: 28px;
                letter-spacing: 0;
                padding-top: 20px;
                font-weight: bold;
            }
            .activityUpdate-content {
                position: relative;
                .activityUpdate-ugcContent {
                    padding-top: 20px;
                    p {
                        font-family: "Benton Sans", "Helvetica", "sans-serif";
                        font-size: 16px;
                        font-weight: normal;
                        line-height: 26px;
                        letter-spacing: 0;
                        color: #6a6a6a;
                    }
                }
            .truncationContent-truncateFade {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 80px;
                background-image: -webkit-repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), 50%, #ffffff 100%);
                background-image: -moz-repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), 50%, #ffffff 100%);
                background-image: -o-repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), 50%, #ffffff 100%);
                background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), 50%, #ffffff 100%);
            }}
        }
        .activityUpdate-divider {
            height: 40px;
            width: 50%;
            border-right: 1px solid #dddddd;
        }
    }
</style>